<template>
  <div class="login">
    <div class="title">欢迎登录天合</div>
    <van-field
      v-model="contactInformation"
      center
      clearable
      placeholder="请输入您的手机号"
      class="inputBox"
      type="tel"
    ></van-field>
    <van-field
      v-model="code"
      center
      clearable
      placeholder="请输入验证码"
      class="inputBox"
      maxlength="6"
    >
      <template #button>
        <div class="getCode" @click="getCode">{{ codeText }}</div>
      </template>
    </van-field>
    <div class="btnBox">
      <div
        class="btn flexCenter"
        :class="{ checked: checked }"
        @click="onLogin"
      >
        登陆
      </div>
    </div>
  </div>
</template>
<script>
  import { phoneReg } from '@/utils/anyRules'
  export default {
    name: 'Login',
    data() {
      return {
        contactInformation: '',
        code: '',
        codeText: '获取验证码',
        time: 0,
        timer: '',
      }
    },
    computed: {
      checked() {
        return this.contactInformation && this.code
      },
    },
    created() {},
    methods: {
      getCode() {
        let { contactInformation } = this
        if (!phoneReg.test(contactInformation)) {
          return this.$toast.fail('请输入正确的手机号')
        }
        if (this.time > 0) return
        this.$api
          .getCheckCode({ contactInformation, type: 0 })
          .then((res) => {
            this.time = 60
            this.timer = setInterval(() => {
              this.time--
              this.codeText = `${this.time}S`
              if (this.time <= 0) {
                clearInterval(this.timer)
                this.codeText = '重新获取'
              }
            }, 1000)
            this.$toast.success('发送成功！')
          })
          .catch((err) => {
            this.$toast.fail(err.msg)
          })
      },
      onLogin() {
        let { contactInformation, code } = this
        this.$router.replace('/')
      },
    },
  }
</script>

<style lang="less" scoped>
  .login {
    padding: 0 30px;
    .title {
      font-size: 30px;
      color: #000000;
      font-weight: 800;
      margin-top: 116px;
      margin-bottom: 40px;
    }
    .inputBox {
      height: 60px;
      .getCode {
        color: #3b6ef1;
        font-size: 14px;
        &:active {
          opacity: 0.8;
        }
      }
    }
    .btnBox {
      width: 100%;
      height: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: 40px;
      .btn {
        width: 334px;
        height: 44px;
        background: #3b6ef1;
        border-radius: 6px;
        font-size: 16px;
        color: #fff;
        margin-top: 10px;
        opacity: 0.5;

        &:active {
          opacity: 0.5;
        }
      }
      .checked {
        opacity: 1;
      }
    }
  }
</style>
